<template>
    <div class="icons">

        <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide v-for="item in page" :key="item.id">
                <div class="icons-item" v-for="page in item" :key="page.id">
                <img :src="page.imgUrl">
                <router-link to="/tickets">
                <p>{{page.title}}</p>
                </router-link>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>
<script>
export default {
    props:['iconList'],
    data(){
        return{
            swiperOptions:{},
        }
    },
    computed:{
        page(){
            let pages=[];
            this.iconList.forEach((item,index)=>{
                let idx=Math.floor(index/8)
                if(!pages[idx]){
                    pages[idx]=[]
                }
                pages[idx].push(item)
            })
            return pages;
            
        }
    },
}
</script>
<style scoped lang="stylus">
@import '~css/common.styl'
.icons{
    width: 100%;
    overflow: hidden;
    background-color: #fff;
}
.icons-item{
    width: 25%;
    padding-bottom: 25%;
    height: 0;
    float: left;
}
.icons-item img{
    width: 1.1rem;
    height: 1.1rem;
    display: block;
    margin: 0 auto;
    padding-top: .2rem;
}
.icons-item p{
    margin-top: .1rem;
    font-size: .28rem;
    text-align: center;
    color:#212121;
    textOverflow();
}
</style>

